<template>
  <div class="search-main-container">
    <!-- 左侧内容区 -->
    <div class="search-content">
      <div class="header" v-show="params.id_type == (0 || 2)">
        <!-- 文章排序类型 -->
        <span
          class="params"
          v-for="(item, i) in sortType"
          :key="i"
          @click="refreshSortType(item.name, item.id)"
          :class="{ actived: checked === item.name }"
        >
          {{ item.name }}
          <span :class="{ hidden: i == 2 }">
            <el-divider direction="vertical"></el-divider>
          </span>
        </span>
        <!-- 选择框 -->
        <el-select
          v-model="value"
          placeholder="全部"
          size="mini"
          @change="handleChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 文章列表 -->
      <Skeleton :loading="isLoadingSkeleton">
        <ArticlesLsit
          :searchTag="searchList.searchTag"
          :searchUser="searchList.searchUser"
          :searchArticle="searchList.searchArticle"
          :myType="'search'"
        ></ArticlesLsit>
      </Skeleton>
      <div v-show="isLoading" class="loading">
        <i class="el-icon-loading"></i>
      </div>
    </div>
  </div>
</template>

<script>
import ArticlesLsit from '@/components/articlesList/ArticlesList.vue'
import Skeleton from '@/components/skeleton/Skeleton.vue'

import { reqSearch } from '@/api/search'

export default {
  data() {
    return {
      // 下拉框配置
      options: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '一天内'
        },
        {
          value: 2,
          label: '一周内'
        },
        {
          value: 3,
          label: '三月内'
        }
      ],
      // 排序栏配置
      sortType: [
        { name: '综合排序', id: 200 },
        { name: '最新优先', id: 300 },
        { name: '最热优先', id: 3 }
      ],
      // 选中下拉框的id
      value: '',
      // 请求参数
      params: {
        id_type: 2,
        cursor: '0',
        limit: 20,
        search_type: 0,
        key_word: ''
      },
      searchList: {},
      // 选中的排序方式
      checked: '',
      // 是否在发起上拉刷新请求
      isLoading: false,
      // 是否在发起新分类请求(与上拉触底的不一样)
      isLoadingSkeleton: false
    }
  },
  created() {
    // 首先获取参数
    this.params.key_word = this.$route.query.query
    console.log('搜索参数', this.params.key_word)
    // 触底的监听
    this.$bus.$on('searchArriveBottom', this.getNewDate)
    // 导航栏的点击监听
    this.$bus.$on('searchCateChange', (id) => {
      if (id == 0) id = 2
      console.log('传递的id:', id)
      this.getNav(id)
    })
    // // 页面刷新时读取点击状态
    this.checked = window.sessionStorage.getItem('checked-search') || '综合排序'
    this.label = window.sessionStorage.getItem('sort_type-search') || '全部'
    this.params.search_type = window.sessionStorage.getItem('search_type') || 0
    this.params.id_type =
      window.sessionStorage.getItem('nav-search-checked-id') || 2
    console.log('我的参数', this.params)
    this.getSearchList('refresh')
  },
  methods: {
    //  获取文章
    async getSearchList(reqType) {
      const type = this.params.id_type
      console.log('分类ID:', type)
      // 分类变化时刷新数据
      if (reqType === 'refresh') {
        this.isLoadingSkeleton = true
        // 重置偏移量
        this.params.cursor = 0

        const { data: res } = await reqSearch(this.params)

        if (type == 9) {
          this.searchList = {}
          this.searchList.searchTag = res.data
        } else if (type == 1) {
          this.searchList = {}
          this.searchList.searchUser = res.data
        } else if (type == 2) {
          this.searchList = {}
          this.searchList.searchArticle = res.data
        }

        // 更新偏移量
        this.params.cursor = res.cursor
        this.isLoadingSkeleton = false
        console.log('搜索结果的数据：', res)
      }
      // 触底时拼接新旧数据
      else {
        this.isLoading = true
        console.log('发起拼接请求')
        const { data: res } = await reqSearch(this.params)

        if (type === 9) {
          this.searchList.searchTag = [
            ...this.searchList.searchTag,
            ...res.data
          ]
        } else if (type === 1) {
          this.searchList.searchUser = [
            ...this.searchList.searchUser,
            ...res.data
          ]
        } else if (type === 2) {
          this.searchList.searchArticle = [
            ...this.searchList.searchArticle,
            ...res.data
          ]
        }
        // 更新偏移量
        this.params.cursor = res.cursor
        this.isLoading = false
        console.log('2', res.data)
      }
    },
    // 触底后发起拼接请求
    getNewDate() {
      // 防止多次请求
      if (this.isLoading) return
      // console.log('连接新数据')
      this.getSearchList()
    },
    // 导航栏的分类切换时
    getNav(id) {
      this.params.id_type = Number(id)
      console.log('获取不同分类', id)
      window.sessionStorage.setItem('nav-search-checked-id', id)
      this.getSearchList('refresh')
    },
    //  点击分类栏
    refreshSortType(name, id) {
      console.log(name, id)
      this.checked = name
      window.sessionStorage.setItem('checked-search', name)
      window.sessionStorage.setItem('search_type', id)

      // this.params.sort_type = id
      this.$message.warning('接口没有对应参数,所以只能走流程刷新数据了')
      this.getSearchList('refresh')
    },
    //  监听下拉框的点击
    handleChange(id) {
      this.params.search_type = id
      this.options.forEach((item) => {
        if (item.value === id)
          window.sessionStorage.setItem('sort_type-search', item.label)
      })
      // console.log(id)
      this.getSearchList('refresh')
    }
  },
  components: {
    ArticlesLsit,
    Skeleton
  },
  beforeDestroy() {
    this.$bus.$off('searchArriveBottom')
    this.$bus.$off('searchCateChange')
  }
}
</script>

<style lang="less" scoped>
:deep(.el-input__inner) {
  width: 8rem;
  padding-right: 30px;
}

:deep(.el-select) {
  margin-left: auto;
}

.search-main-container {
  margin-top: 9.67rem;
  display: flex;
  position: relative;

  .search-content {
    width: 700px;
    margin-right: auto;
    background-color: #fff;

    .header {
      padding: 1.3rem 1rem;
      white-space: nowrap;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      align-items: center;
      height: 2.4rem;
      margin-bottom .params {
        font-size: 1.2rem;
        color: var(--taojin-font-3);
        cursor: pointer;
      }

      .params {
        padding-left: 8px;
        font-size: 1.16rem;
        color: #909090;
        cursor: pointer;
      }

      .params:hover {
        color: var(--taojin-brand-2-hover);
      }

      .hidden {
        visibility: hidden;
      }
    }

    .loading {
      margin: 1rem auto;
      text-align: center;
    }
  }
}

.actived {
  color: var(--hover-color) !important;
}
</style>
